<template>
    <el-dialog v-model="dialogVisible" title="选择设备所属项目" :close-on-click-modal="false" append-to-body width="600" height="300"
        class="editDialog" align-center>


        <el-form  class="basicForm" label-position="right" v-model="formObj" label-width="100px">
            <el-form-item label=""  class="full-width-item">
                <el-select v-model="formData.projectId" placeholder="请选择项目">
                    <el-option v-for="item in projectListData" :key="item.id" 
                    :label="item.projectName" :value="item.id" />
                </el-select>
            </el-form-item>

        </el-form>

        <template #footer>
            <el-button @click="dialogVisible = false" auto-insert-space>取消</el-button>
            <el-button type="primary" @click="onConfirm" auto-insert-space>确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, defineProps } from "vue";

import { ElMessage } from "element-plus";

import { projectList,relProject } from "../../utils/requests";

let dialogVisible = ref(false);

// eslint-disable-next-line no-undef,no-unused-vars
const emits = defineEmits(["confirm"]);


let formData = ref({
    projectId: null,
    snCodes: [],
});

let projectListData = ref([]);


const openDialog = (selectSn) => { 
 
    dialogVisible.value = true;
    formData.value.snCodes = selectSn.map((item) => item.code).join(',');
    requestProjects();
};


const onConfirm = () => {
 
    relProject(formData.value).then((data) => {
        if (data) {
            ElMessage.success("保存成功");
            emits("confirm");
            dialogVisible.value = false;
        } else {
            ElMessage.error("保存失败");
        }
    });
};

const requestProjects = () => {
    projectList({ projectLevel: 1 }).then((data) => {
        projectListData.value = data;
    });
};

defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.basicForm,
.selectionForm {
    >* {
        width: calc(50% - 20px);
        margin-right: 20px;

        .selectInput {
            flex: 1;
        }

        :deep(.el-date-editor) {
            width: 100%;
        }
    }

    >.long {
        width: calc(100% - 20px);
        margin-right: 20px;
    }

    .sumUnit {
        .text {
            margin-right: 10px;
        }
    }
}
 
.full-width-item {
  width: calc(100% - 80px) !important; /* 让整个 el-form-item 占据整行 */
}
</style>
